<template>
  <div>
    <tab :line-width=2 active-color='#001a4b' v-model="index">
      <tab-item class="vux-center" :selected="selected === item" v-for="(item, index) in list" @on-item-click="onItemClick()" :key="index">{{item}}</tab-item>
    </tab>
    <swiper ref="swiper" 
      direction="horizontal" 
      width="100%" 
      height="150" 
      pager-color="#ea5a49" 
      pager-bg-color="#e5e4e3"
      hide-pager="false"
    >
      <swiper-item>
        <h1 style="color: #0a9dc7;" @click="onClick()">Item 1</h1>
      </swiper-item>

      <swiper-item>
        <h1 style="color: #44cc00;">Item 2</h1>
      </swiper-item>

      <swiper-item>
        <h1 style="color: #ffc900;">Item 3</h1>
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
import { Tab, TabItem } from 'vux'
const list = () => ['精选', '美食', '电影', '酒店', '外卖', '测试1', '测试2', '测试3']
export default {
  components: {
    Tab,
    TabItem
  },
  data () {
    return {
      list: list(),
      selected: '精选',
      index: 0
    }
  },
  mounted:function(){
    //console.log(document.getElementById('father-wrap'));
    console.dir(document.body.clientHeight-88);
  },
  methods: {
    onItemClick (index) {
      //console.log('on item click:', this.index)
    }
  },
  watch:{
    index:function(val,oldVal){
      this.$refs.swiper.go(val);
      //console.log(this.$refs.swiper);
    }
  }
}
</script>
<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
@tab-bar-active-color:#001a4b;
.box {
  padding: 15px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100%;
}
.news-swiper {
  height: 534px;
}
</style>